<template>
    <div class="detail">
        <div :class="['d_title','animated',{'fadeInUp':isShow}]">粉青小封坛</div>
        <div class="d_shop">
            <img :class="['d_img','animated',{'fadeInUp':isShow}]" src="@/assets/images/wine11.png" alt="">
            <div class="light"></div>
            <div class="light_line animated fadeInUp"></div>
        </div>
        <div class="d_desc d_desc1 animated fadeInUp">
            杜康酒是中国历史名酒，因杜康始造而得名,有“贡酒”、“仙酒”之誉。
        </div>
        <div class="d_desc d_desc2 animated fadeInUp">
            1979年开始打入国际市场。
        </div>
        <div class="d_desc d_desc3 animated fadeInUp">
            1988年我国外交部发出通知，杜康酒被指定为国宴用酒。
        </div>
        <div :class="['d_title2','animated',{'fadeInUp':isShow}]">探索更多经典</div>
        <swiper ref="mySwiper1" :options="swiperOption" class="myswiper">
            <!-- <swiper-slide v-for="item in SlidrImg" v-bind:key="item.id">
                <a href="javascript:;">
                    <img class="img" :src="item.url ? item.url : item" alt="商品图">
                </a>
            </swiper-slide> -->
            <swiper-slide>
                <a href="javascript:;">
                    <img class="img" src="@/assets/images/wine1.png" alt="商品图">
                    <div class="img_text">粉青小封坛</div>
                </a>
            </swiper-slide>
            <swiper-slide>
                <a href="javascript:;">
                    <img class="img" src="@/assets/images/wine2.png" alt="商品图">
                    <div class="img_text">清图红盒</div>
                </a>
            </swiper-slide>
            <swiper-slide>
                <a href="javascript:;">
                    <img class="img" src="@/assets/images/wine3.png" alt="商品图">
                    <div class="img_text">清图红盒</div>
                </a>
            </swiper-slide>
            <swiper-slide>
                <a href="javascript:;">
                    <img class="img" src="@/assets/images/wine4.png" alt="商品图">
                    <div class="img_text">清图蓝盒</div>
                </a>
            </swiper-slide>
            <swiper-slide>
                <a href="javascript:;">
                    <img class="img" src="@/assets/images/wine5.png" alt="商品图">
                    <div class="img_text">清图蓝盒</div>
                </a>
            </swiper-slide>
            <swiper-slide>
                <a href="javascript:;">
                    <img class="img" src="@/assets/images/wine1.png" alt="商品图">
                    <div class="img_text">粉青小封坛</div>
                </a>
            </swiper-slide>
            <div class="swiper-pagination" slot="pagination"></div>
            <div class="swiper-scrollbar"></div>
        </swiper>
    </div>
</template>

<script>

import Vue from "vue";
import VueAwesomeSwiper from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";

import { swiper, swiperSlide } from "vue-awesome-swiper";
Vue.use(VueAwesomeSwiper);
export default {
    name: 'HelloWorld',
    components:{
        
    },
    data () {
        return {
            isShow:false,
            swiperOption: {
                slidesPerView: 3,
                // // spaceBetween: 90,
                // speed: 1000,
                // initialSlide: 0,
                // autoplay: true,
                // loop: true,
                // pagination: {
                //     el: ".swiper-pagination",
                //     clickable: true //点击分页器的指示点分页器会控制Swiper切换
                // },
                // // pagination: '.swiper-pagination',
                // // paginationClickable: true,
                loop : true,
                autoplay:true,
                pagination: {  //分页器
                    el: '.swiper-pagination',
                },

            }
        }
    },
    computed: {
        swiper() {
            return this.$refs.mySwiper1.swiper
        }
    },
    mounted(){
        this.init();
    },
    methods:{
        init(){
            this.isShow = true;
        }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
.detail{
    padding: 20px 0px;
    margin: 0px auto;
    .d_title{
        font-size: 38px;
        text-align: center;
        color: #d7bf87;
        animation-delay:0.1s;
        transition: transform 1s ease 0s;
    }
    .d_title2{
        font-size: 38px;
        text-align: center;
        color: #d7bf87;
        line-height: 130px;
        animation-delay:2s;
        transition: transform 1s ease 0s;
    }
    .d_shop{
        text-align: center;
        .d_img{
            width: 300px;
            animation-delay:0.4s;
            transition: transform 1s ease 0s;
        }
        .light{
            margin: -55px auto 0px;
            width: 180px;
            // height: 20px;
            border-radius: 50%;
            background: rgba(168, 169, 176,0.9);
            // box-shadow:0 0 1.8rem 1.7rem #fff;
            box-shadow:0 0 1.4rem 1rem rgba(250,250,250,0.8);
            // background:linear-gradient(to left,rgba(219, 219, 219,0.7),rgba(250, 250, 250, 0.7),rgba(219, 219, 219,0.7));
        }
        .light_line{
            animation-delay:0.5s;
            transition: transform 1s ease 0s;
            margin: 130px 0px 40px;
            width: 750px;
            height: 5px;
            border-radius: 50%;
            background:rgba(250,250,250,0.2);
            // box-shadow:0 0 1.4rem 1rem rgba(250,250,250,0.8);
        }
    }
    .d_desc{
        color: #fff;
        font-size: 24px;
        text-align: center;
        line-height: 80px;
        padding: 0px 30px;
    }
    .d_desc1{
        animation-delay:0.8s;
    }
    .d_desc2{
        animation-delay:1s;
    }
    .d_desc3{
        animation-delay:1.5s;
        border-bottom: 1px solid rgba(129, 126, 126,0.5);
        padding-bottom: 30px;
    }
}
.img{
    width:150px;
    height: 220px;
}
.img_text{
    color: #d7bf87;
    text-align: center;
}

.swiper-container{
    animation-delay:2s;
    height: 450px;
    .swiper-pagination-bullet{
        background-color: #888888;
        width:16px;
        height: 2px;
        border-radius: 3px;
        opacity: 1 !important;
        bottom: -2px;
    }
    .swiper-pagination-bullet-active{
        background-color: #fff;
        width:16px;
        height: 2px;
        border-radius: 3px;
    }
}

</style>
